<template>
  <div>
    <!-- 标识栏 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item >知识图谱系统</el-breadcrumb-item>
      <el-breadcrumb-item>数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>知识管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 搜索栏和添加按钮 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryInfo.knowledgeKeyword" clearable @clear="getNodesList ()">
            <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addNodeDialog = true">添加知识</el-button>
        </el-col>
      </el-row>

      <!-- 知识列表 -->
      <el-table :data="nodes" border stripe max-height="470px">
        <el-table-column type="expand">
          <template #default="scope">
            <p>{{scope.row.knowledgeContent}}</p>
          </template>
        </el-table-column>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="id" label="ID" width="60px"></el-table-column>
        <el-table-column prop="knowledgeName" label="知识名称" width="150px"></el-table-column>
        <el-table-column prop="knowledgeTag" label="标签集" width="400px"></el-table-column>
        <el-table-column prop="className" label="所属类"></el-table-column>
        <el-table-column prop="color" label="颜色(rgb)" width="110px"></el-table-column>
        <el-table-column prop="size" label="大小" width="60px"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top" :enterable="false">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditNodeDialog(scope.row)">
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteNodeById(scope.row.id)">
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="建立联系" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini" @click="showNodesRelativeDialog(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :currentPage="page"
        :total="total">
      </el-pagination>
    </el-card>

    <!-- 添加知识对话框 -->
    <el-dialog title="添加知识节点" :visible.sync="addNodeDialog" width="50%" @close="addDialogClose()" :close-on-click-modal="false">
      <el-form :model="addNode" label-width="140px">
        <el-form-item label="所属类别">
          <el-select v-model="addNode.classId" placeholder="请选择所属类别">
            <el-option :label="item.className" :value="item.id" v-for="item in categories" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="知识名称">
          <el-input v-model="addNode.knowledgeName"></el-input>
        </el-form-item>
        <el-form-item label="大小">
          <el-input v-model="addNode.size"></el-input>
        </el-form-item>
        <el-form-item label="知识内容">
          <el-input v-model="addNode.knowledgeContent" type="textarea" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="颜色(rgb)">
          <el-color-picker v-model="addNode.color" :color-format="'rgb'" :show-alpha="false"></el-color-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addNodeDialog = false">取 消</el-button>
          <el-button type="primary" @click="addNoded ()">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改知识对话框 -->
    <el-dialog title="修改知识节点" :visible.sync="editNodeDialog" width="50%" :close-on-click-modal="false">
      <el-form :model="editNode" label-width="140px">
        <el-form-item label="所属类别">
          <el-select v-model="editNode.classId" placeholder="请选择所属类别">
            <el-option :label="item.className" :value="item.id" v-for="item in categories" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="知识名称">
          <el-input v-model="editNode.knowledgeName"></el-input>
        </el-form-item>
        <el-form-item label="标签集(用|分开)">
          <el-input v-model="editNode.knowledgeTag"></el-input>
        </el-form-item>
        <el-form-item label="大小">
          <el-input v-model="editNode.size"></el-input>
        </el-form-item>
        <el-form-item label="知识内容">
          <el-input v-model="editNode.knowledgeContent" type="textarea" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="颜色(rgb)">
          <el-color-picker v-model="editNode.color" :color-format="'rgb'" :show-alpha="false"></el-color-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editNodeDialog = false">取 消</el-button>
          <el-button type="primary" @click="editNoded ()">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 连接知识对话框 -->
    <el-dialog title="连接知识节点" :visible.sync="nodesRelativeDialog" width="50%" :close-on-click-modal="false">
      <el-form :model="nodeRelative" label-width="140px">
        <el-form-item label="知识名称">
          <el-input v-model="nodeRelative.knowledgeName" disabled></el-input>
        </el-form-item>
        <el-form-item label="连接的知识节点ID">
          <el-input v-model="nodeRelative.sonId"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="nodesRelativeDialog = false">取 消</el-button>
          <el-button type="primary" @click="nodeRelatived ()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getNodes, queryNode, insertNode, getCategoies, deleteNode, updateNode, insertRelative } from '@/assets/api.js'
export default {
  name: 'NodeManager',
  data () {
    return {
      // 搜索数据参数
      queryInfo: {
        startPage: 0,
        endPage: 8,
        knowledgeKeyword: ''
      },
      // 总数据数
      total: 200,
      // 页数
      page: 1,
      // 添加知识对话框是否显示
      addNodeDialog: false,
      // 知识列表
      nodes: [],
      // 添加知识表单
      addNode: {
        classId: '',
        knowledgeName: '',
        knowledgeContent: '',
        size: '',
        color: 'rgb(0, 0, 0)'
      },
      // 知识分类列表
      categories: [],
      // 修改知识表单
      editNode: {
        id: '',
        classId: '',
        knowledgeName: '',
        knowledgeContent: '',
        size: '',
        knowledgeTag: '',
        color: ''
      },
      // 修改知识对话框是否显示
      editNodeDialog: false,
      nodeRelative: {
        fatherId: '',
        knowledgeName: '',
        sonId: ''
      },
      // 知识连接对话框是否开启
      nodesRelativeDialog: false
    }
  },
  methods: {
    // 返回知识列表
    async getNodesList () {
      const {data: res} = await getNodes(0, this.queryInfo)
      if (res.code === 200) {
        this.nodes = res.data
        console.log(this.nodes)
        this.total = Number.parseInt(res.msg)
      }
    },
    search () {
      this.queryInfo.startPage = 0
      this.getNode()
    },
    // 返回搜索的知识列表
    async getNode () {
      if (!this.queryInfo.knowledgeKeyword) {
        return this.getNodesList()
      }
      const {data: res} = await queryNode(this.queryInfo)
      if (res.data.length === 0) {
        // this.getNodesList()
        return this.$message.error('搜索失败')
      }
      this.nodes = res.data
      this.total = Number.parseInt(res.msg)
      // this.$message.success('搜索成功')
    },
    // 显示知识修改对话框
    showEditNodeDialog (node) {
      this.editNode.id = node.id
      this.editNode.classId = node.classId
      this.editNode.knowledgeName = node.knowledgeName
      this.editNode.knowledgeContent = node.knowledgeContent
      this.editNode.size = node.size
      this.editNode.knowledgeTag = node.knowledgeTag
      this.editNode.color = 'rgb(' + node.color.replace(/,/g, ', ') + ')'
      this.editNodeDialog = true
    },
    // 根据id删除知识操作
    deleteNodeById (id) {
      this.$confirm('此操作将永久删除该知识节点, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const {data: res} = await deleteNode(id)
        if (res.code === 200) {
          this.getNodesList()
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 显示知识连接对话栏
    showNodesRelativeDialog (node) {
      this.nodeRelative.knowledgeName = node.knowledgeName
      this.nodeRelative.fatherId = node.id
      this.nodesRelativeDialog = true
    },
    // 知识连接操作
    async nodeRelatived () {
      const {data: res} = await insertRelative(this.nodeRelative)
      if (res.code === 200) {
        this.getNodesList()
        this.$message.success(res.msg)
      } else {
        this.$message.error(res.msg)
      }
      this.nodesRelativeDialog = false
    },
    // 添加知识操作
    async addNoded () {
      if (this.addNode.color === null) {
        this.addNode.color = '0,0,0'
      } else {
        let color = this.addNode.color
        color = color.slice(4, color.length - 1)
        color = color.replace(/\s*/g, '')
        this.addNode.color = color
      }
      const {data: res} = await insertNode(this.addNode)
      if (res.code === 200) {
        this.getNodesList()
        this.$message.success(res.msg)
      } else {
        this.$message.error(res.msg)
      }
      this.addNodeDialog = false
    },
    // 添加知识表单重置
    addDialogClose () {
      this.addNode.classId = ''
      this.addNode.knowledgeName = ''
      this.addNode.knowledgeContent = ''
      this.addNode.size = ''
      this.addNode.knowledgeTag = ''
      this.addNode.color = 'rgb(0, 0, 0)'
    },
    // 返回知识分类列表
    async getCategoriesList () {
      const {data: res} = await getCategoies()
      this.categories = res.data
    },
    // 知识修改操作
    async editNoded () {
      if (this.editNode.color === null) {
        this.editNode.color = '0,0,0'
      } else {
        let color = this.editNode.color
        color = color.slice(4, color.length - 1)
        color = color.replace(/\s*/g, '')
        this.editNode.color = color
      }
      const {data: res} = await updateNode(this.editNode)
      if (res.code === 200) {
        this.$message.success(res.msg)
      } else {
        this.$message.error(res.msg)
      }
      if (!this.queryInfo.knowledgeKeyword) {
        this.getNodesList()
      } else {
        this.getNode(this.queryInfo)
      }
      this.editNodeDialog = false
    },
    // 切换页面
    handleCurrentChange (val) {
      this.page = val
      this.queryInfo.startPage = (this.page - 1) * 8
      console.log(this.queryInfo)
      if (!this.queryInfo.knowledgeKeyword) {
        this.getNodesList()
      } else {
        this.getNode(this.queryInfo)
      }
    }
  },
  created () {
    this.getNodesList()
    this.getCategoriesList()
  }
}
</script>

<style scoped>
/* 搜索栏大小 */
.el-select {
  width: 100%;
}
</style>
